<template>
  <el-container>
    <el-header height="100px">
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="账户验证"></el-step>
        <el-step title="密码重置"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </el-header>
    <el-main>
      <ul :style="{'list-style': 'none'}">
        <li v-if="active==0">
          <AdminCheck   @next="next"/>
        </li>
        <li  v-if="active==1">
          <ResetPassword  @next="next"/>
        </li>
        <li  v-if="active==2" >
          <el-row :gutter="20">
            <el-col :span="12" :offset="10">
              {{time}}后自动跳转<router-link to="/login">登录页</router-link>
            </el-col>
          </el-row>
        </li>

      </ul>
    </el-main>
  </el-container>
  


</template>

<script lang="ts">
  import router from '@/router/index';
  import ResetPassword from './ResetPassword.vue';
  import AdminCheck from './AdminCheck.vue';
  import { Component, Vue , Emit } from 'vue-property-decorator';

   @Component({
     components:{
      AdminCheck,
      ResetPassword
     }
   })
   class ModifiyPassword extends Vue {
    //  激活步骤
      active:number=0;
      // 计时器
      time:number=5;
      
      next(index:number){
        this.active=index;

        // 当密码设置成功后自动跳转
        if(index==2){
          setTimeout(()=>{
            this.next(2);
            this.time--;
            if(this.time==0){
              router.push('/login').catch((res:any):any=>{});
            }
          }, 1000);
        }
      }
   
   }
  export default ModifiyPassword;
</script>
